<template>
	<div class="evidence-unit-eviPrint-container">
		<el-dialog title="案卷标签打印" v-model="isShowDialog" width="500px" @close="closeDialog">
			<div id="eviPrinter">
				<el-card shadow="hover" v-for="item in evidences" :key="item.no" style="margin: 0px; padding: 0px;border:0px;">
					<div class="pri-title">{{ tilte }}</div>
					<el-form size="small" label-width="120px" style="text-align: left">
						<el-row :gutter="35" style="margin-top: 0px;">
							<el-col :xs="24" class="mb10">
								<el-form-item label="案件编号：">{{ caseNo }}</el-form-item>
							</el-col>
							<el-col :xs="24" class="mb10">
								<el-form-item label="警情编号：">{{ inspectionNo }}</el-form-item>
							</el-col>
							<el-col :xs="24" class="mb10">
								<el-form-item label="案卷编号：">{{ item.no }}</el-form-item>
							</el-col>
							<el-col :xs="24" class="mb10">
								<el-form-item label="案卷名称：">{{ item.name }}</el-form-item>
							</el-col>
							<el-col :span="16">
								<el-form-item label="存放位置：" style="margin-bottom:0 !important;">{{ item.location }}</el-form-item>
								<el-form-item label="数量：">{{ item.quantity }}</el-form-item>
							</el-col>
							<el-col :span="8" style="padding:0 !important;">
								<qrcode-vue :value="item.no" size:300 ></qrcode-vue>
							</el-col>
						</el-row>
					</el-form>
					<!--endprint-->
				</el-card>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="goPrint" size="small">标签打印</el-button>
					<el-button type="primary" @click="goRfidPrint" size="small">Rfid打印</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, nextTick, computed, watch } from 'vue';
import printJS from 'print-js';
import { useStore } from '/@/store/index';
import { dateFormat } from '/@/common/index';
import { printEvidenceTag } from '/@/api/tag/index';
import { putRfids, printRfid } from '/@/api/common/index';
import { ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
import { rfidPrint } from '/@/api/hardware/index';
import QrcodeVue from 'qrcode.vue'

export default {
	name: 'eviPrint',
	components: {QrcodeVue},
	emits: ['reload'],
	setup(props, { emit }) {
		const store = useStore();
		const state = reactive({
			isShowDialog: false,
			tilte: '',
			evidences: [],
			caseName: '',
			caseNo: '',
			inspectionNo:""
		});
		

		async function goRfidPrint() {
			store.dispatch('hardware/getHardwareConfigByKey', 'yjpz_rfiddayin').then(async function (cfg) {
				if (!cfg || !cfg.res1) {
					ElMessage('未配置【Rfid打印机配置】');
					return;
				}

				for (var i = 0; i < state.evidences.length; i++) {
					var timestamp1 = '000' + new Date().valueOf()+'00000000';
					var _data = state.evidences[i];

					var json = {
						PrintType: 1,
						Epc: timestamp1,
						CaseNo: state.caseNo,
						CaseName: _data.no,
						EviNo: _data.name,
						EviName: _data.location,
						Holder: _data.quantity,
						CaseNoTitle: '案件编号',//案件编号
						CaseNameTitle: '案卷编号',//案件名称
						EviNoTitle: '案卷名称',//案卷编号
						EviNameTitle: '存放位置',//案卷名称
						HolderTitle: '数量',//存放位置
						HolderTime: _data.extractionDateTime,
						key: cfg.res1,
					};

					rfidPrint(json).then((resl) => {
							//console.log(resl);
						//var _result = JSON.parse(resl.data);
						if (resl.data.Success) {
							putRfids({ list: [{ id: _data.id, rfid: timestamp1 }] });
							ElMessage({ message: _data.no + '打印成功', type: 'success' });
						} else {
							ElMessage.error(_data.no + '打印失败');
						}
					});
				
					if(i<state.evidences.length-1)
				      await sleep(2000);
				}
			});
		}

		function sleep(time){
		return new Promise((resolve) => setTimeout(resolve, time));
		}
 

		async function saveRfidData(data) {
			await putRfids(data.data).then((res) => {
				if (res.success) {
					state.isShowDialog = false;
					ElMessage({ message: '打印成功', type: 'success' });
					closeDialog();
				}
			});
		}

		// 打开弹窗
		const openDialog = (_data: any) => {
			state.isShowDialog = true;
			state.tilte = _data.title;
			state.inspectionNo = _data.inspectionNo;
			(state.caseName = _data.caseName), (state.caseNo = _data.caseNo), (state.evidences = []);
			Object.assign(state.evidences, _data.list);
		};
		// 关闭弹窗
		const closeDialog = () => {
			emit('reload');
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};

		const onPrint = async () => {
			//var bdhtml = window.document.body.innerHTML;
			//var sprnstr = '<!--startprint-->'; //开始打印标识字符串有17个字符
			//var eprnstr = '<!--endprint-->'; //结束打印标识字符串
			//var prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容
			//prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
			//window.document.body.innerHTML = prnhtml; //把需要打印的指定内容赋给body.innerHTML
			// window.print(); //调用浏览器的打印功能打印指定区域
			//window.document.body.innerHTML = bdhtml; // 最后还原页面
			await printEvidenceTag({
				data: state.evidences,
				Authorization: `Bearer ${Session.get('token')}`,
			}).then((res: any) => {
				if (res.sucess) {
					ElMessage({ message: '操作成功', type: 'success' });
				}
			});
		};

		const style = '@page {margin:0 0mm;size:100mm 70mm;};';
		const goPrint = () => {
			printJS({
				printable: 'eviPrinter',
				type: 'html',
				targetStyles: ['*'],
				style,
				repeatTableHeader: true,
				ignoreElements: ['no-print', 'bc', 'gb'],
				maxWidth: 1000,
			});
		};
		return {
			saveRfidData,
			goRfidPrint,
			goPrint,
			openDialog,
			closeDialog,
			onCancel,
			onPrint,
			sleep,
			dateFormat,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
@page {
	margin:0;
	size:100mm 70mm;
}
/deep/ .el-dialog__body {
	height: 300px;
	color: black; font-weight: lighter;
	font-family: simhei;
}
/deep/ .pri-title{font-size:20px; font-weight: bold; width: 100%; text-align: center; margin-bottom: 10px;font-family: simhei;}
/deep/ .el-card__body{padding:8px;}
/deep/ .el-form-item__label{padding-right:5px;}
/deep/ .mb10{margin-bottom: 0px !important;box-sizing: border-box;} 
/deep/ .el-form-item--small .el-form-item__label{line-height:30px;color: black;font-weight:bold;font-size:18px;}
/deep/ .el-form-item--small .el-form-item__content{line-height:30px;color: black;font-weight:bold;font-size:18px;}
/deep/ .el-form-item__label {color: black; font-weight: lighter;font-family:simhei;}
</style>
